<template>
  <div class="app-container">

    <u-page title="在用LED列表">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="楼层" prop="floor">
            <el-select v-model="listQuery.floor" placeholder="请选择楼层" clearable>
              <el-option v-for="item in floors" :label="item.code" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间段" prop="inputMonthRange">
            <el-date-picker
              v-model="inputMonthRange"
              value-format ="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

<!--      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >

      </u-table>-->
      <u-table
        row-key="index"
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:left>
          <el-table-column type="expand">
            <template slot-scope="{row}">
              <div class="detailsinfo">
                  <div class="detailtitle">
                    <span>表单号</span>
                    <span>品牌名称</span>
                    <span>厂商编号</span>
                    <span style="width: 400px">厂商名称</span>
                    <span>播放天数</span>
                    <span>播放时长</span>
                    <span>开始时间</span>
                    <span>结束时间</span>
                  </div>
                  <div v-for="detail in row.details" class="detailinfo">
                    <div>
                      {{ detail.code }}
                    </div>
                    <div>
                      {{ detail.brandname }}
                    </div>
                    <div>
                      {{ detail.firmcode }}
                    </div>
                    <div style="width: 400px">
                      {{ detail.firmname }}
                    </div>
                    <div>
                      {{ detail.days }}天
                    </div>
                    <div>
                      {{ detail.duration }}s
                    </div>
                    <div>
                      {{ detail.startdatestr }}
                    </div>
                    <div>
                      {{ detail.enddatestr }}
                    </div>
                  </div>
              </div>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.OpcenAdvertisement,
      // 楼层
      floors: [],
      list: [],
      inputMonthRange: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 表格
      columns: [
        {
          prop: 'floor',
          label: '楼层',
        },
        {
          prop: 'adname',
          label: 'LED名称',
        }
      ],
      // 排期表格
      listLoading: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        floor: ''
      }
    }
  },
  mounted() {
    this.getFloors()
  },
  methods: {
    // 加载楼层
    getFloors() {
      const self = this
      self.api.floors().then(res => {
        this.floors = res.data
      })
    },
    // 搜索事件
    handleFilter() {
      const self = this
      if (self.inputMonthRange.length < 2) {
        this.$message.warning('请选择时间！')
        return
      }
      this.inputdateFormat()
      this.hdlFilter()
    },
    // 注册时间格式转换
    inputdateFormat() {
      if (this.inputMonthRange) {
        this.listQuery.beginTime = this.inputMonthRange[0]
        this.listQuery.endTime = this.inputMonthRange[1]
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
    },
    /**
     * 查询事件
     */
    hdlFilter() {
      this.listQuery.page = 1
      this.hdlList()
    },
    /**
     * 获取列表数据
     */
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      self.api.ledlist(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data.list
        // fix:修复ID重复的问题,设置table表格key值必须唯一
        self.list.forEach((item, index) => {
          self.list[index].index = index
        })
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
  .item >>> .el-form-item__content {
    display: flex;
  }
  .status {
    ::v-deep{
      .el-input{
        width: 140px;
      }
    }
  }
  ::v-deep{
    .el-table-expand {
      font-size: 0;

      label {
        width: 90px;
        color: #99a9bf;
        font-size: 12px;
      }

      .el-form-item{
        margin-bottom: 2px;
        margin-right: 0;
        vertical-align: top;
      }

      .el-form-item__content {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 12px;
        display: inline-block;
        vertical-align: top;
        position: relative;
      }
    }
  }
  .detailsinfo{
    width: 100%;
    border-right:2px solid #dfe6ec ;
    border: 1px solid #dfe6ec;
  }

  .detailtitle{
    padding: 5px;
    text-align: center;
    display: flex;
    width: 100%;
    background-color: #d5dbe7;
  }
  .detailtitle span {
    width:15%;
  }
  .detailinfo{
    padding: 5px;
    text-align: center;
    display: flex;
    height: 30px;
  }
  .detailinfo div{
    padding: 2px;
    width:15%;
    border-bottom: 1px solid #dfe6ec;
  }
}
</style>
